<template>
  <div class="recomCon">
    <div class="goback" @click="goBack">
      <img src="../../assets/images/goback.png" alt="" />
    </div>
    <swiper
      ref="mySwiper"
      :options="swiperOptions"
      class="content"
      autoplay="true"
    >
      <swiper-slide class="img" v-for="(item, index) in imgUrl" :key="index">
        <img :src="item" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="info">
      <div class="title money">￥{{ price }}</div>
      <div class="desc">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="宝贝介绍" name="first">
            <div class="bbjs">
              <div class="bDesc">
                位置:<span>{{ itemData.location }}</span>
              </div>
              <div class="bDesc">
                保障:<span>{{ itemData.baozhang }}年</span>
              </div>
              <div class="bDesc">
                活动:<span>{{ itemData.huodong }}</span>
              </div>
              <div class="bDesc">
                参数:<span>{{ itemData.canshu }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="评价信息" name="second">
            <ul class="pDesc">
              <li v-for="(item, index) in pingjia" :key="index">
                <p class="uname">
                  名字:<span>{{ item.uname }}</span>
                </p>
                <div class="text">
                  内容:<span>{{ item.desc }}</span>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="详情管理" name="third">详情管理</el-tab-pane>
          <el-tab-pane label="推荐好物" name="fourth">推荐好物</el-tab-pane>
          <!-- 页脚 -->
          <div class="foot">
            <div class="foot-bottom">
              <div class="shoucang" v-if="!isShoucang" @click="shoucang">
                <img src="../../assets/images/shoucang.png" alt="" />
                <p>收藏</p>
              </div>
              <div class="shoucang" v-else @click="shoucang">
                <img src="../../assets/images/shoucang1.png" alt="" />
                <p>已收藏</p>
              </div>
              <el-button class="phone">购买</el-button>
            </div>
          </div>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapState,mapMutations } from 'vuex'
export default {
  name: "RecomDetails",
  data() {
    return {
      itemData: {},
      imgUrl: [],
      price: "",
      pingjia: [],
      isShoucang: false,
      activeName: "second",
      swiperOptions: {
        autoplay: {
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          delay: 3000, // 自动切换的时间间隔（单位ms）
        },
        loop: true, //循环播放
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  // computed: {
  //   ...mapState("storeModule", {
  //     info: (state) => state.info,
  //   }),
  // },
  methods: {
    // ...mapMutations('storeModule',['setInfo']),
  },

  mounted() {
    //   console.log(this.$route.params.id);
  console.log(typeof(this.$route.params.id));
  console.log(typeof(String));
    if (typeof(this.$route.params.id)===typeof({})) {
      localStorage.setItem("getData", JSON.stringify(this.$route.params.id));
      this.itemData = this.$route.params.id;

      for (const key in this.itemData) {
        if (key == "url" || key == "url1" || key == "url2") {
          this.imgUrl.push(this.itemData[key]);
        }
      }
      this.price = this.itemData.price;
      this.pingjia = this.itemData.pingjia;
    } else {
      const getItem = JSON.parse(localStorage.getItem("getData"));
      // console.log(getItem);
      this.itemData = getItem;
      console.log(this.itemData);
      for (const key in this.itemData) {
        if (key == "url" || key == "url1" || key == "url2") {
          this.imgUrl.push(this.itemData[key]);
        }
      }
      this.price = this.itemData.price;
      this.pingjia = this.itemData.pingjia;
    }

    // this.itemData = this.$route.params.id;
    // //存储
    // const setItem = localStorage.setItem('getItemData',JSON.stringify(this.itemData));

    // // console.log(this.itemData);
    // for (const key in this.itemData) {
    //   if (key == "url" || key == "url1" || key == "url2") {
    //     this.imgUrl.push(this.itemData[key]);
    //   }
    // }
    // this.price = this.itemData.price;
    // this.pingjia = this.itemData.pingjia;
    // // console.log(this.pingjia);

    // const getItem = JSON.parse(localStorage.getItem("getItemData"));
    // console.log(getItem);
    // this.itemData = getItem;
  },
  methods: {
    //   返回上一级
    goBack() {
      this.$router.go(-1);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //收藏
    shoucang() {
      this.isShoucang = !this.isShoucang;
      this.$bus.$emit("shoucang", this.itemData);
    },
  },
};
</script>

<style lang="less" scoped>
.recomCon {
  position: relative;
  .goback {
    width: 26px;
    height: 26px;
    margin: 9px 11px 0;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    .img {
      width: 100%;
      height: 237px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .info {
    padding: 10px;
    .title {
      font-size: 16px;
      font-weight: 600;
      white-space: nowrap;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .desc {
      width: 100%;
      font-size: 14px;
      .bbjs {
        .bDesc {
          // width: 100%;
          // height: 50px;
          font-size: 16px;
          margin-bottom: 7px;

          margin-bottom: 10px;
          span {
            font-size: 14px;
            margin-left: 5px;
          }
        }
      }
      .pDesc {
        // height: 30px;
        width: 100%;
        li {
          width: 100%;
          //   height: 50px;
          border-bottom: 1px solid #eee;

          .uname {
            font-size: 12px;
            margin: 3px 3px 5px 0;
          }
          .text {
            font-size: 14px;
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}
.money {
  color: #ff4444;
  font-size: 18px;
  font-weight: 500;
}
// 页脚
.foot {
  width: 100%;
  height: 109px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;
  .foot-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 60px;
    padding: 10px 30px 10px;
    box-sizing: border-box;
    display: flex;
    .shoucang {
      // width: 70px;
      flex: 1;
      height: 100%;
      img {
        width: 30px;
        height: 30px;
      }
    }
    .phone {
      flex: 3;
      width: 100%;
      background-color: #ff4444;
      color: #fff;
    }
  }
}
</style>